<div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
  <div class="formio-form" ref="webform" novalidate>
    <div id="tabs" class="formio-component formio-component-tabs formio-component-tabs " ref="component">
      <div class="card">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs" role="tablist">
            <li class="nav-item" role="tab" ref="tabLi-tabs">
              <a class="nav-link" href="#tab1" ref="tabLink-tabs">
                Tab 1
              </a>
            </li>
            <li class="nav-item" role="tab" ref="tabLi-tabs">
              <a class="nav-link" href="#tab2" ref="tabLink-tabs">
                Tab 2
              </a>
            </li>
          </ul>
        </div>
        <div role="tabpanel" class="card-body tab-pane" style="display: block" ref="tab-tabs">
          <div id="checkbox" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkbox " ref="component">
            <div class="form-check checkbox">
              <label class=" form-check-label">
                <input ref="input" name="data[checkbox]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
                <span>hide</span>
                </input>
              </label>
            </div>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
        </div>
        <div role="tabpanel" class="card-body tab-pane" style="display: none" ref="tab-tabs">
          <div id="dataGrid" class="mb-2 formio-form-group has-feedback formio-component formio-component-datagrid formio-component-dataGrid " ref="component">
            <label ref="label" class="col-form-label " for="dataGrid-dataGrid" id="l-dataGrid-dataGrid">
              grid
            </label>
            <table class="table datagrid-table table-bordered
    ">
              <thead>
                <tr>
                  <th class="">
                    Label
                  </th>
                  <th class="">
                    Value
                  </th>
                  <th>
                    <span class="visually-hidden">Add/Remove</span>
                  </th>
                </tr>
              </thead>
              <tbody ref="datagrid-dataGrid-tbody" data-key="datagrid-dataGrid">
                <tr ref="datagrid-dataGrid-row">
                  <td ref="datagrid-dataGrid">
                    <div id="label" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-label  formio-component-label-hidden" ref="component">
                      <div ref="element">
                        <input ref="input" name="data[dataGrid][0][label]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="label-label" aria-labelledby="l-label-label " aria-required="false"></input>
                      </div>
                      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                    </div>
                  </td>
                  <td ref="datagrid-dataGrid">
                    <div id="value" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-value  formio-component-label-hidden" ref="component">
                      <div ref="element">
                        <input ref="input" name="data[dataGrid][0][value]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="value-value" aria-labelledby="l-value-value " aria-required="false"></input>
                      </div>
                      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                    </div>
                  </td>
                  <td>
                    <button type="button" class="btn btn-secondary formio-button-remove-row" ref="datagrid-dataGrid-removeRow" tabindex="0" aria-label="remove">
                      <i class="fa fa-times-circle-o"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="4">
                    <button class="btn btn-primary formio-button-add-row" ref="datagrid-dataGrid-addRow" tabindex="0">
                      <i class="fa fa-plus"></i> Add Another
                    </button>
                  </td>
                </tr>
              </tfoot>
            </table>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="submit" class="mb-2 formio-form-group has-feedback formio-component formio-component-button formio-component-submit  mb-2 formio-form-group" ref="component">
      <button ref="button" name="data[submit]" type="submit" class="btn btn-primary btn-md" lang="en">
        Submit
      </button>
      <div ref="buttonMessageContainer">
        <span class="help-block" ref="buttonMessage"></span>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
  </div>
  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
</div>